<template>
  <div class="loading">
    <div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .loading{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    div{
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      i{
        display: inline-block;
        width: 4px;
        height: 30px;
        background-color: red;
        transform-origin: center bottom;
        animation: loading 0.6s linear -0.4s infinite alternate-reverse;
        &:first-of-type{
          animation-delay: -0.0s;
        }
        &:nth-child(2){
          animation-delay: -0.2s;
        }
        &:last-of-type{
          animation-delay: -0.6s;
        }
      }
    }
  }
  @keyframes loading {
    0%{
      height:0px;
    }
    100%{
      height: 100%;
    }
  }
</style>